<template>
  <div class="gua-display">
    <div class="gua-container">
      <!-- 从第六爻开始显示（从上到下） -->
      <div 
        v-for="(yao, index) in [...yaos].reverse()" 
        :key="index" 
        class="yao-line"
        :class="{
          'yang-yao': yao.value === 7 || yao.value === 9,
          'yin-yao': yao.value === 6 || yao.value === 8,
          'changing': yao.isChanging
        }"
      >
        <div class="yao-number">{{ 6 - index }}爻</div>
      </div>
    </div>
    
    <div class="gua-info">
      <h3 class="gua-name">{{ guaName }}卦</h3>
      <div class="gua-description">
        <p><strong>卦辞：</strong>{{ guaCi }}</p>
        <p><strong>象辞：</strong>{{ xiangCi }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  yaos: {
    type: Array,
    required: true
  },
  guaName: {
    type: String,
    required: true
  },
  guaCi: {
    type: String,
    required: true
  },
  xiangCi: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.gua-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #1A2F4B 0%, #2C3E50 100%);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: white;
}

.gua-container {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin-bottom: 24px;
}

.yao-line {
  position: relative;
  height: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yang-yao {
  width: 120px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao {
  width: 120px;
  height: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yin-yao::before,
.yin-yao::after {
  content: '';
  width: 50px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao::before {
  margin-right: 20px;
}

.yin-yao::after {
  margin-left: 20px;
}

.changing {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.yao-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #D4AF37;
  font-weight: bold;
}

.gua-info {
  text-align: center;
}

.gua-name {
  font-size: 28px;
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 16px;
  font-family: 'SimSun', serif;
}

.gua-description {
  font-size: 14px;
  line-height: 1.6;
  color: #ECF0F1;
}

.gua-description strong {
  color: #D4AF37;
}
</style>